import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件：
// 一级目录组件：
import Layout from '@/views/layout.vue'
import Login from '@/views/login.vue'
import Register from '@/views/register.vue'
import Detail from '@/views/detail.vue'
// 二级目录组件：
import Article from '@/views/article.vue'
import Collect from '@/views/collect.vue'
import Like from '@/views/like.vue'
import User from '@/views/user.vue'
// 引入封装的本地存储（使用路由前置守卫）
import { getToken } from '@/utils/storage.js'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
      path: '/',
      component: Layout,
      redirect: '/article',
      children: [{
          path: '/collect',
          component: Collect
        },
        {
          path: '/like',
          component: Like
        },
        {
          path: '/user',
          component: User
        },
        {
          path: '/article',
          component: Article
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/register',
      component: Register
    },
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 路由前置守卫：
// 在每一个路由在真正被访问到之前，都会先经过路由前置导航守卫
// 只有前置导航守卫放行了，才能访问到对应的页面
// 每个路由即将被访问匹配时，都会调用 beforeEach的回调函数
// to: 往哪去，要去的路由对象（路径，参数）
// from：从哪来，从哪个地址过来的
// next是否放行：
// （1）next() 即放行
// （2）next('/路径')，拦截到某页面

// 1、判断是否有 token 如果有，放行
// 2、没有 token，但是要去 login 或者 register，放行
// 3、没有 token，去其他地方，不放行

// 白名单页面数组：
const whitePage = ['/login', '/register']
router.beforeEach((to, from, next) => {
  if (getToken()) {
    next()
  } else if (!getToken() && whitePage.includes(to.path)) {
    next()
  } else {
    next({ path: '/login' })
  }
})

export default router